<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="../../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>选完文件后不自动上传</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
     <button type="button" class="layui-btn" id="test9">开始上传</button>
    <img class="layui-upload-img" id="demo1">
</div>
<script>
    layui.use(['upload','form'],function() {
        var upload = layui.upload;
        var $ = layui.jquery;
        //渲染文件上传
        //普通图片上传
        var uploadInst = //选完文件后不自动上传
            upload.render({
                elem: '#test8'
                , url: '/file/upload' //改成您自己的上传接口
                , method : 'post'//默认post
                , auto: false //是否选择文件后自动上传
                //,field : 'file'默认上传文件名是file
                //,multiple: true
                , bindAction: '#test9'
                ,accept: 'images'
                ,acceptMime : 'image/*'//列出所有图片
                , done: function (res) {
                    layer.msg('上传成功');
                    console.log(res);
                    console.log(res.obj.url);
                    $('#demo1').attr('src',res.obj.url);

                },
                error:function(){
                    layer.msg("上传失败了呀");
                }
                ,choose:function (obj){
                    console.log(obj);
                    obj.preview(function(index,file,result){
                        console.log(index); //得到文件索引
                        console.log(file); //得到文件对象
                        //console.log(result); //得到文件base64编码，比如图片
                        $('#demo1').attr('src',result);
                    });
                }

            });
    });
</script>
</body>
</html>
